<template>
  <div>
    <ul>
      <li :style="{opacity}">欢迎学习Vue</li>
      <li>news001 <input type="text"></li>
      <li>news002 <input type="text"></li>
      <li>news003 <input type="text"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name:'HomeNews',
  data () {
    return {
      opacity:1  
    }
  },
  // 使用这两个钩子无法实现销毁和挂载，因为在Home组件里面已经添加了keep-alive缓存，所以定时器不会被销毁，会在后台一直运行
  /* beforeDestroy(){
    console.log('New组件即将被销毁了')
    clearInterval(this.timer)
  }, */
  /* mounted(){
    this.timer = setInterval(()=>{
      console.log('@@@')
      this.opacity -=0.01
      if(this.opacity <= 0) this.opacity = 1
    },16)
  } */

  deactivated(){
    console.log('New组件失活了')
    clearInterval(this.timer)
  },
  activated(){
    console.log('New组件激活了')
    this.timer = setInterval(()=>{
      console.log('@@@')
      this.opacity -=0.01
      if(this.opacity <= 0) this.opacity = 1
    },16)
  }

}
</script>

<style>

</style>